<!-- UnMerge.vue -->
<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">
       
        <el-breadcrumb-item>拆卸单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 主内容区 -->
    <div class="together-content">
      <!-- 搜索表单 -->
      <div class="search-form">
        <el-form :inline="true" label-width="60px" style="width: 100%">
          <el-form-item>
            <el-input
              v-model="searchForm.keyword"
              placeholder="单据号/备注"
              clearable
            />
          </el-form-item>

          <el-form-item label="日期：" style="width: 250px">
            <el-date-picker
              v-model="searchForm.date"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <!-- 查询按钮 -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div style="margin-bottom: 15px; text-align: right;">
        <el-button type="primary" @click="router.push({ name: 'salesEditUnMerge' })">新增</el-button>
        <el-button type="success" @click="handleAction('audit')">审核</el-button>
        <el-button type="danger" @click="handleAction('delete')">删除</el-button>
      </div>

      <el-table :data="disassemblyList" style="width: 100%" border>
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column prop="code" label="拆卸单号" width="140" align="center" />
        <el-table-column prop="mergeDate" label="拆卸日期" width="160" align="center">
          <template #default="scope">
            {{ formatDate(scope.row.mergeDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="staffNumber" label="创建人" width="140" align="center" />
        <el-table-column prop="verifierNumber" label="审核人" width="140" align="center" />
        <el-table-column prop="status" label="状态" width="120" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">
              {{ scope.row.status === 1 ? '已审核' : '待审核' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="180" align="center">
          <template #default="scope">
            <el-button
              link
              type="warning"
              size="small"
              @click="router.push({ name: 'editUnMerge', params: { code: scope.row.code } })"
            >
              编辑
            </el-button>
            <el-button link type="danger" size="small" @click="deleteRow(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 20px; text-align: center;">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          layout="total, ->, prev, pager, next, jumper"
          background
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
import router from '@/router'

// ------------------ 搜索表单 ------------------
const searchForm = ref({})

// ------------------ 数据 ------------------
const disassemblyList = ref([
  {
    id: 1,
    code: 'DISASSEMBLE-20250401001',
    mergeDate: '2025-04-01 10:00:00',
    staffNumber: 'STAFF-001',
    verifierNumber: 'VERIFIER-001',
    status: 1,
    detailList: [
      {
        goodsCode: 'GOODS-001',
        goodsName: '螺丝',
        goodsNumber: 5.0,
        sourceWarehouseCode: 'WAREHOUSE-B',
        targetWarehouseCode: 'WAREHOUSE-A'
      }
    ]
  },
  {
    id: 2,
    code: 'DISASSEMBLE-20250401002',
    mergeDate: '2025-04-01 14:30:00',
    staffNumber: 'STAFF-002',
    verifierNumber: 'VERIFIER-002',
    status: 0,
    detailList: [
      {
        goodsCode: 'GOODS-002',
        goodsName: '螺母',
        goodsNumber: 3.5,
        sourceWarehouseCode: 'WAREHOUSE-C',
        targetWarehouseCode: 'WAREHOUSE-D'
      }
    ]
  }
])

const currentPage = ref(1)
const pageSize = ref(10)
const total = computed(() => disassemblyList.value.length)

// ------------------ 方法 ------------------
const onSubmit = () => {
  // TODO: 实现搜索逻辑
  ElMessage.info('执行查询')
}

const selectable = (row) => {
  return row.status !== 1 // 已审核不可选中
}

const handleAction = (action) => {
  const selected = disassemblyList.value.filter(selectable)
  if (selected.length === 0) {
    ElMessage.warning(`请先选择要${action === 'audit' ? '审核' : '删除'}的待处理项`)
    return
  }

  const actionText = action === 'audit' ? '审核' : '删除'
  ElMessageBox.confirm(`确定要${actionText}选中的${selected.length}条记录吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    if (action === 'audit') {
      selected.forEach(item => {
        item.status = 1
      })
      ElMessage.success('审核成功')
    } else {
      disassemblyList.value = disassemblyList.value.filter(item => !selected.includes(item))
      ElMessage.success('删除成功')
    }
  })
}

const deleteRow = (index) => {
  ElMessageBox.confirm('确定删除该拆卸单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    disassemblyList.value.splice(index, 1)
    ElMessage.success('删除成功')
  })
}

const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleString()
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.topNav {
  margin-bottom: 20px;
}
</style>